import React, { Component } from 'react'
import Alert from './components/Alert';
export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      flag:false,
      obj:''
    }
  }

   add_data=()=>{
    console.log(111,value);
    let newData=[...data];
    newData.push(value);
    setdata(newData)
    setValue('')
  }
  //删除方法
  del_data=(index)=>{
    console.log(index)
    let newData=[...data]
    newData.splice(index,1)
    setdata(newData)
  }
   showModal = (item,index) => {
     this.setState({

     })
    setObj(item)
    setCount(index)
    setFlag(true);
  };

   handleOk = () => {
    setFlag(false);
  };

   handleCancel = () => {
    setFlag(false);
  };
  
  //点击修改date中数据
   setDataValue=(val)=>{
    let newData=[...data]
    newData[count]=val
    setdata(newData)
  }
  render() {

    let my_modal = {
      flag,
      handleCancel,
      handleOk,
      obj,
      setDataValue
    }
    const {flag,obj} =this.state;
    return (
      <div>
         <input type='text' value={value} onChange={(e)=>{this.setValue(e.target.value)}} />
      <button onClick={()=>{this.add_data()}}>添加</button>

      {
        data&&data.length >0 ?data.map((item,index)=>{
          return <p key={index}>
            {item}
            <button onClick={()=>{showModal(item,index)}}>编辑</button>
            <button onClick={()=>{ del_data(index) }}>删除</button>
          </p>
        }):'暂无数据'
      }
        <Alert flag={flag} obj={obj} handleCancel={this.handleCancel.bind(this) } handleOk={this.handleOk.bind(this)}  setDataValue={this.setDataValue.bind(this)}></Alert>
      </div>
    )
  }
}

export default App



